<template>
  <el-row :gutter="100">
    <el-col :span="12" class="recharge-left">
      <el-form :model="formMessage" label-width="0px" inline size="small">
        <div class="flex align-center" style="margin-bottom: 40px;">
          当房间余额少于
          <el-form-item prop="money" style="margin: 0 10px;">
            <el-input size="small" v-model="formMessage.money">
              <span slot="prefix">￥</span>
            </el-input>
          </el-form-item>系统将发送余额不足短信提醒
        </div>
        <div class="text-center">
          <el-button type="primary" size="small" @click="callBack">确定修改</el-button>
        </div>
      </el-form>
    </el-col>
    <el-col :span="12">
      <div
        class="box-card-message"
        shadow="always"
      >【电瓦特】亲爱的***，您“**小区*幢*单元*楼 **号”的费用余额少于<span class="success">{{formMessage.money}}</span>元，请搜索微信小程序[瓦特之家]及时充值，以免欠费造成不便，谢谢</div>
      <p class="text-center view-label">短信显示预览</p>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "formMessage",
  props: {
    formMessage: {
      type: Object,
      type: {},
    },
  },
  methods: {
    callBack() {
      this.$emit('callBack');
    }
  }
};
</script>

<style lang="scss" scoped>
.view-label {
  width: 350px;
  font-size: 12px;
  color: #909399;
}
.box-card-message {
  max-width: 350px;
  padding: 20px 26px 14px;
  background-color: #f5f7fa;
  border-radius: 10px;
  color: #202122;
}
.recharge-left {
  padding-top: 20px;
}
.message-line{
  display: inline-block;
}
</style>
